@charset "utf-8";
@import "init.scss";
@import "common.scss";
.main {
    width: 1064px;
    height: 2442px;
    background-color: #000000;
    color: #ffffff;
    margin: 0 auto;
    .my_page_header{
       border-bottom: 2px solid #464545;
       padding: 0 46px;
       ul,div{
            display: inline-block;
            vertical-align: middle;
        }
        span{
            color: #FFFFFF;
            font-size: 18px;
            line-height: 70px;
            vertical-align: middle;
        }
        ul{
            li{
                margin-left: 40px;
                a{
                    font-size: 18px;
                    color: #7d7c7c;
                    line-height: 70px;
                    &:hover{
                        color: #0dafd2;
                    }
                }
            }
        }
        .search{
            display: inline-block;
            width: 170px;
            height: 24px;
            margin-left: 98px;
            border: 1px solid #545454;
            form{
                width: 100%;
                height: 100%;
                input{
                    width: 128px;
                    height: 22px;
                    vertical-align: middle;
                    background: #000000;
                    padding-left: 6px;
                    border: none;
                    color: #FFFFFF;
                    outline: none;
                }
                .icon-ziyuan{
                    background: #000000;
                    color: #878686 ;
                    border: none;
                    vertical-align: middle;
                    font-weight: bold;
                    outline: none;
                    &:hover{
                        cursor: pointer;
                    }
                }
            }
            
        }
        
    }
    .tuijian {
        margin: 0 40px;
        p:first-of-type {
            font-size: 33px;
        }
        .tuijianlan {
            border-bottom: 1px solid #4d4d4d;
            div {
                display: inline-block;
                margin: 0 5px 15px;
            }
            p {
                font-size: 12px;
                line-height: 36px;
            }
        }
    }
    .box {
        height: 2100px;
        .head_box {
            width: 1064px;
            height: 334px;
            background: skyblue;
            margin: 0 auto;
        }
        .mid_box {
           
            background-color: black;
            margin: 28px auto;
            .zuo_top {
                width: 205px;
                height: 1150px;
                .second_box {
                    width: 158px;
                    height: 525px;
                    background-color: #252525;
                    margin-left: 45px;
                    margin-top: 10px;
                    .second_box_title {
                        font-size: 14px;
                        color: #0dafd2;
                        text-align: center;
                    }
                    .second_box_title p {
                        line-height: 40px;
                        vertical-align: middle;
                    }
                    .second_box_content {
                        width: 140px;
                        margin: 0 auto;
                    }
                    .second_little_box {
                        margin: 5px 10px;
                        padding-top: 5px;
                        .left_img {
                            display: inline-block;
                            width: 52px;
                            img {
                                width: 100%;
                            }
                        }
                        .right_time {
                            display: inline-block;
                            font-size: 14px;
                            color: #747474;
                            vertical-align: top;
                        }
                    }
                }
            }
            .xuanze_box {
                width: 155px;
                margin-left: 44px;
            }
            ul {
                display: block;
                width: 156px;
                margin: 30 auto;
                color: #747373;
                font-size: 14px;
                line-height: 40px;
                text-align: center;
                li {
                    background: #252525;
                    border-bottom: 5px solid black;
                    padding: 0px 27px 0px 52px;
                    a{
                         color: #747373;
                    }
                    a:hover{
                        color: white;
                    }
                }
            }
            li:hover {
                color: #ffffff;
            }
            .zuo_mid {
                width: 156px;
                height: 481px;
                background: #252525;
                text-align: center;
                color: #139ab8;
            }
            .zuo_mid span:first-child {
                display: inline-block;
                font-size: 14px;
                margin: 12px auto;
            }
            .border_top {
                width: 135px;
                margin: 0 auto;
                border-top: 1px solid #444444;
            }
            .border_bot {
                border-bottom: 1px solid #444444;
                width: 135px;
                margin: 15px auto;
            }
            .img_mid_box {
                margin: 10px 0px 0 13px;
            }
            .img_mid {
                width: 156px;
                padding-top: 8px;
                .img_box {
                    width: 53px;
                    //      margin-top: 16px;
                }
                img {
                    width: 100%;
                }
                span {
                    font-size: 12px;
                    color: #747474;
                    margin: 0 28px 0 0px;
                }
            }
            .sp {
                font-size: 14px;
                margin-top: 5px;
            }
        }
        .gengduo {
            font-size: 14px;
            color: #11a1c1;
            width: 140px;
            height: 50px;
            line-height: 50px;
            margin-left: 10px;
            text-align: center;
            border-top: 1px solid #444444;
            border-bottom: 1px solid #444444;
            span:first-child {
                margin-left: 30px;
            }
        }
        .liulanshu {
            font-size: 12px;
            text-align: center;
            p {
                display: inline-block;
                margin: 10px 3px;
                color: #7d7d7d;
            }
        }
        
        .fachuyaoqing{
            background-color: #fff;
           width: 808px;
           margin-right: 30px;
           margin-top: 30px;
            
            
            .fachuyaoqing_title{
                p{
                    color: #0dafd2;
                    font-size: 33px;
                    margin: 25px 0 17px 35px;
                }
                
                
            }
            .yaoqing_box{
                
            .yaoqing_content{
                border-top: 1px solid #f0f0f0;
                width: 748px;
                margin: 0 auto;
                .yaoqing_neirong{ 
                    margin: 20px 6px;
                    text-align: center;
                    background-color: #F6F6F6;
                   
                    
                    .yaoqing_picture{
                        width: 233px;
                        height: 240px;
                       
                        img{
                            width: 100%;
                        }
                    }
                  
                  
                    p:first-of-type{
                        font-size: 22px;
                        color: #4D4D4D;
                        line-height: 48px;
                    }
                    p:nth-of-type(2){
                        font-size: 15px;
                        color: #676767;
                        line-height: 35px;
                    }
                    p:nth-of-type(3){
                        font-size: 30px;
                        color: #4D4D4D;
                        line-height: 50px;
                        position: relative;}
                        p:nth-of-type(3)::after{
                            content: "";
                            width: 60px;
                            height: 1px;
                            background-color: #c5c5c5;
                            position: absolute;
                          bottom: 24px;
                          right: 10px;
                        }
                         p:nth-of-type(3)::before{
                            content: "";
                            width: 60px;
                            height: 1px;
                            background-color: #c5c5c5;
                            position: absolute;
                          bottom: 23px;
                          left: 16px;
                        }
    
                    
                    div:nth-of-type(2){
                        font-size: 12px;
                        color: #4D4D4D;
                        span{
                            padding-left: 26px;
                             line-height: 32px;
                        }
                       
                       div{
                           div:first-child{
                               color: #ff6c8b;
                               width: 25px;
                               height: 25px;
                           }
                           div:nth-child(2){
                               color: #acacac;
                                width: 25px;
                               height: 25px;
                           }
                       }
                  
                    }
                    
                    
                
                
                
                
                
                }
             .fanye{
              
          a{font-size: 12px;
                   color: #a19f9f;
                   width: 64px;
                   line-height: 28px;
               }
            dl{
                font-size: 12px;
                line-height: 20px;
                color: #a19f9f;
                text-align: center;
               a{
                   color: #a19f9f;
               }
              
                dt{
                    width: 64px;
                line-height: 28px;
                position: relative;
                   
                }
                
                dt::before{
                       content: "";
                       border-top: 3px solid #7d7c7c;
                       border-right: 3px solid transparent;
                       border-bottom: 3px solid transparent;
                       border-left: 3px solid transparent;
                       position: absolute;
                       right: 4px;
                       top: 14px;
                   } 
                    dd{
                       width: 64px;
                       display: none;
                       transform: scale(0);
                   }
                  
                   
                   
            
            }dl:hover dd{
                       animation-name: fan;
                       animation-duration: 0.3s;
                       animation-fill-mode: forwards;
                       display: block;
                   } 
                   @keyframes fan{
                       0%{transform: scale(0);}
                       50%{transform: scale(0.8);}
                       100%{transform: scale(1);}
                       
                   }
            
            
            
        } 
            }
            }
              
        
        }
 
}


}